@charset "utf-8";
@import "reset";
@import "common";
//输入框样式
@mixin inp {
    width: 294px;
    height: 37px;
    border: 1px solid #dbdbdb;
    border-radius: 5px;
    padding-left: 5px;
    font-size: 20px;
}
//按钮样式
@mixin btn {
    width: 299px;
    height: 37px;
    border: 0;
    background-color: #584c4c;
    font-size: 18px;
    color: #fff;
    border-radius: 5px;
    cursor: pointer;
}
//输入框名字样式
@mixin inpFont {
    display: block;
    color: #3b3b3b;
    font: 14px/14px "微软雅黑";
    margin-bottom: 13px;
}
//输入框动画
@keyframes inpAnimation {
    form {
        box-shadow: 0 0 5px #66FF66;
    }
    to {
        box-shadow: 0 0 20px #38ebc3;
    }
}
input:focus {
    animation: inpAnimation 1s ease-out infinite alternate;
}
input[type="button"],input[type="radio"],input[type="checkbox"]:focus {
    animation: none;
}
/*头部*/

/*登录、注册、订单*/
section {
    padding: 25px 0 169px;
    .whole{
        margin-left: 60px;
        .login {
            width: 400px;
            height: 1144px;
            background-color: #f6f6f6;
            form {
                .form_content {
                    margin-left: 49px;
                    margin-top: 47px;
                    .title {
                        margin-bottom: 31px;
                        span {
                            display: block;
                            font: 18px/18px "微软雅黑";
                        }
                    }
                    .email_tel {
                        label {
                            @include inpFont;
                        }
                        input[type="text"] {
                            @include inp;
                        }
                    }
                    .password {
                        margin-top: 43px;
                        label {
                            @include inpFont;
                        }
                        input[type="password"] {
                            @include inp;
                        }
                    }
                    .login_btn {
                        margin-top: 43px;
                        input[type="button"] {
                            @include btn;
                        }
                    }
                    .checkbox {
                        margin-top: 36px;
                        font-size: 12px;
                        label {
                            input[type="checkbox"] {
                                width: 15px;
                                height: 15px;
                                vertical-align: -3px;
                            }
                        }
                        a {
                            float: right;
                            color: #000;
                            margin-right: 50px;
                        }
                    }
                }
            }
        }
        .register {
            width: 400px;
            height: 1144px;
            border: 1px solid #f2f2f2;
            box-sizing: border-box;
            .form_content {
                margin-left: 49px;
                margin-top: 47px;
                .title {
                    margin-bottom: 27px;
                    span {
                        display: block;
                        font: 18px/18px "微软雅黑";
                    }
                }
                .explain {
                    font: 14px "微软雅黑";
                    color: #3b3b3b;
                    p {
                        width: 266px;
                        line-height: 24px;
                    }
                    span {
                        display: block;
                        margin-top: 25px;
                        line-height: 14px;
                    }
                }
                .email {
                    margin-top: 57px;
                    label {
                        span {
                            @include inpFont;
                        }
                        input[type="email"] {
                            @include inp;
                        }
                    }
                }
                .phone {
                    margin-top: 33px;
                    label {
                        span {
                            @include inpFont;
                        }
                        input[type="tel"] {
                            @include inp;
                        }
                    }
                }
                .psw {
                    margin-top: 38px;
                    label {
                        span {
                            @include inpFont;
                            em {
                                color: #8a8a8a;
                            }
                        }
                        input[type="password"] {
                            @include inp;
                        }
                    }
                }
                .verify {
                    margin-top: 38px;
                    label {
                        span {
                            @include inpFont;
                        }
                        input[type="password"] {
                            @include inp;
                        }
                    }
                }
                .name {
                    margin-top: 41px;
                    label {
                        span {
                            @include inpFont;
                            em {
                                color: #8a8a8a;
                            }
                        }
                        input[type="text"] {
                            @include inp;
                        }
                    }
                }
                .sort {
                    margin-top: 52px;
                    .sort_title {
                        @include inpFont;
                    }
                    label {
                        input {
                            vertical-align: -2px;
                        }
                        span {
                            font: 12px/12px "微软雅黑";
                            margin-left: 8px;
                        }
                        &:last-child {
                            margin-left: 103px;
                        }
                    }
                }
                .reg_btn {
                    margin-top: 49px;
                    input[type="button"] {
                        @include btn;
                    }
                }
                .agree {
                    margin-top: 28px;
                    input[type="checkbox"] {
                        width: 15px;
                        height: 15px;
                        vertical-align: -4px;
                    }
                    a {
                        font: 12px/12px "微软雅黑";
                        color: #000;
                    }
                }
            }
        }
        .order_form {
            width: 400px;
            .font_content {
                margin-left: 49px;
                margin-top: 47px;
                .title {
                    margin-bottom: 31px;
                    span {
                        display: block;
                        font: 18px/18px "微软雅黑";
                    }
                }
                .check {
                    p {
                        font: 14px/14px "微软雅黑";
                        color: #3b3b3b;
                    }
                }
                .order_num {
                    margin-top: 31px;
                    label {
                        span {
                            @include inpFont;
                        }
                        input[type="text"] {
                            @include inp;
                        }
                    }
                }
                .email {
                    margin-top: 37px;
                    label {
                        span {
                            @include inpFont;
                        }
                        input[type="email"] {
                            @include inp;
                        }
                    }
                }
                .order_btn {
                    margin-top: 44px;
                    input[type="button"] {
                        @include btn;
                    }
                }
            }
        }
    }
}
/*尾部*/